<template>
  <!-- 定义403错误页面的模板 -->
  <div class="back">
    <!-- 显示错误代码403 -->
    <div>403</div>
    <!-- 显示错误信息及闪烁的下划线 -->
    <div class="txt">
      Forbidden / 您无权访问<span class="blink">_</span>
    </div>

    <!-- 返回首页的链接 -->
    <div class="link-container">
      <router-link to="/" class="more-link">返 回 首 页</router-link>
    </div>

    <!-- 前往登录的链接 -->
    <div class="link-container">
      <router-link to="/login" class="more-link">前 往 登 录</router-link>
    </div>
  </div>
</template>


<script>
// 导出403错误页面组件
export default {
  // 组件名称为403
  name: "403"
}
</script>


<style scoped>
/* 引入Google字体 */
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

/* 链接容器样式 */
.link-container {
  text-align: center; /* 文本居中 */
}

/* 更多链接的样式 */
.more-link {
  /* 文本转换为大写 */
  text-transform: uppercase;
  /* 字体大小 */
  font-size: 20px;
  /* 背景颜色 */
  background-color: #9c9a98;
  /* 内边距 */
  padding: 15px 20px;
  /* 圆角边框 */
  border-radius: 10px;
  /* 文字颜色 */
  color: #fff;
  /* 显示为内联块元素 */
  display: inline-block;
  /* 行高 */
  line-height: 1.5;
  /* 移除下划线 */
  text-decoration: none;
  /* 上边距 */
  margin-top: 50px;
  /* 字母间距 */
  letter-spacing: 1px;
  /* 宽度 */
  width: 200px;
}

/* 鼠标悬停时的样式 */
.more-link:hover{
  background-color: #956c6c; /* 背景颜色变化 */
  color: #ffebcc; /* 文字颜色变化 */
  transform: scale(1.1); /* 放大效果 */
  /* 过渡效果 */
  transition: color 0.3s, background-color 0.3s, transform 0.3s;
}

/* 设置html和body的宽高及去除默认边距 */
html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}

/* 全局样式 */
*{
  /* 使用引入的字体 */
  font-family: 'Press Start 2P', cursive;
  /* 盒模型设置为border-box */
  box-sizing: border-box;
}

/* 背景容器样式 */
.back{
  padding: 1rem; /* 内边距 */
  background-color: #9a5050; /* 背景颜色 */
  display: flex; /* 使用flex布局 */
  height: 100vh; /* 高度为视口高度 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 6rem; /* 字体大小 */
  flex-direction: column; /* 垂直排列子元素 */
}

/* 文本样式 */
.back .txt {
  font-size: 1.8rem; /* 字体大小 */
}

/* 定义闪烁动画 */
@keyframes blink {
  0%   {opacity: 0} /* 开始时透明 */
  49%  {opacity: 0} /* 49%时透明 */
  50%  {opacity: 1} /* 50%时不透明 */
  100% {opacity: 1} /* 结束时不透明 */
}

/* 应用闪烁动画到.blink类 */
.blink {
  animation-name: blink; /* 动画名称 */
  animation-duration: 1s; /* 动画持续时间 */
  animation-iteration-count: infinite; /* 无限循环 */
}
</style>
